<template>
  <el-table :data="tableData" style="width: 100%" stripe lazy highlight-current-row :row-class-name="activeRow" @row-dblclick="songsClick">
    <!-- 序号 -->
    <el-table-column width="40">
      <template slot-scope="scope">
        <!-- 小喇叭 -->
        <i class="iconfont icon-shengyintianchong" v-if="songsId === scope.row.id"></i>
        <!-- 索引 -->
        <span v-else>{{ handleIndex(scope.$index) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="45" v-if="config.showTodos">
      <template slot-scope="scope">
        <i class="iconfont icon-aixin1" @click="likedMusic(scope.row.id)" v-if="!isLiked(scope.row.id)"></i>
        <i class="iconfont icon-aixin2" @click="likedMusic(scope.row.id)" v-else></i>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="标题" :width="config.width" :show-overflow-tooltip="true">
      <template v-slot="{ row }">
        <div class="title">
          <span class="name">
            {{ row.name }}
            <span v-if="row.alia.length !== 0" class="alia">({{ row.alia[0] }})</span>
          </span>
          <span v-if="row.fee == 1" class="vip">VIP</span>
          <span v-if="row.mv !== 0" class="mv special" @click="toMvDeTail(row.mv)">MV<i class="el-icon-caret-right"></i></span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="ar[0].name" label="歌手" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="al.name" label="专辑" :show-overflow-tooltip="true" v-if="config.showAlbum"></el-table-column>
    <el-table-column prop="dt" label="时长">
      <template v-slot="{ row }">
        {{ (row.dt / 1000) | timeFormat }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
  props: {
    tableData: {
      type: Array,
    },
    config: {
      type: Object,
      default() {
        return {
          width: 300, //默认值不起效？？？
          //是否展示操作
          showTodos: true,
          //是否展示专辑
          showAlbum: true,
        };
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(['songsId', 'isLogin', 'isLiked']),
  },
  methods: {
    ...mapMutations(['getSongsId', 'changePlay', 'todoMusic']),
    //双击歌曲实现播放
    songsClick(row) {
      //将歌曲id提交到vuex中
      this.getSongsId(row.id);
      //提交播放状态
      this.changePlay(true);
    },
    //索引加 0操作
    handleIndex(index) {
      index += 1;
      if (index < 10) {
        return '0' + index;
      } else {
        return index;
      }
    },
    //高亮选中行样式
    activeRow(row) {
      if (row.row.id === this.songsId) {
        return 'active-row';
      }
    },
    // 爱心点击回调
    async likedMusic(id) {
      if (!this.isLogin) return this.$message.error('请先登录哦');
      let like = this.isLiked(id);
      this.$request('/like', { id, like: !like });
      //添加、删除喜欢音乐列表中的该音乐
      this.todoMusic({ type: !like ? '喜欢' : '取消喜欢', id });
      //刷新音乐列表
      setTimeout(() => {
        this.$emit('refresh');
        this.$message.success(`${like ? '已从我喜欢列表移除' : '已成功添加到我喜欢'}`);
      }, 300);
    },
    //点击mv跳转
    toMvDeTail(id) {
      this.$router.push('/videodetail/' + id);
    },
  },
};
</script>

<style scoped='scoped' lang='scss'>
.iconfont {
  /* 图片居中 */
  vertical-align: middle;
  cursor: pointer;
}
.icon-aixin2 {
  color: $themeColor;
}
.title {
  display: flex;
  align-items: center;
  .name {
    @include hidWord;
    .alia {
      font-size: 12px;
      color: #969697;
    }
  }
  .vip,
  .mv {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #fe672e;
    border-radius: 2px;
    color: #fe672e;
    margin-left: 5px;
    height: 14px;
    padding: 0 2px;
    line-height: 1;
  }
  .special {
    border-color: $themeColor;
    color: $themeColor;
    cursor: pointer;
    &:hover{
      color: rgba(255, 0, 0, 0.463);
    }
  }
}
</style>